<template>
    <div class="content">
        <el-tabs v-model="tabActiveName" @tab-click="selectTab">
            <el-tab-pane label="学员基本信息" name="first">
                <div class="info">
                    <div class="head">
                        <img class="head-img" :src="student.head_url" alt="">
                        <p class="center">{{student.name}}-{{student.age}}岁</p>
                        <!-- 关注学员或取关学员 -->
                        <el-button :loading="isFocusLoading" @click="changeFocusStatus" v-if="roles.indexOf('hr')!=-1" type="primary">{{isFocus?'取消关注':'点击关注'}}</el-button>
                    </div>
                    <div class="base">
                        <p class="sub-title">基本信息</p>
                        <p v-if="student.sex!=null" class="sub-content">性别:{{student.sex=='0'?'男':'女'}}</p>
                        <p v-if="student.phone" class="sub-content">联系方式:{{student.phone}}</p>
                        <p v-if="student.school" class="sub-content">毕业院校:{{student.school}}</p>
                        <p v-if="student.nation" class="sub-content">民族:{{student.nation}}</p>
                        <p v-if="student.birthday" class="sub-content">出生日期:{{student.birthday}}</p>
                        <p v-if="student.native_place" class="sub-content">籍贯:{{student.native_place}}</p>
                        <p v-if="student.height" class="sub-content">身高:{{student.height}}CM</p>
                        <p v-if="student.weight" class="sub-content">体重:{{student.weight}}Kg</p>
                        <p v-if="student.marriage!=null" class="sub-content">婚姻状况:{{student.marriage=='0'?'未婚':(student.marriage=='1'?'已婚':'未婚')}}</p>
                    </div>
                    <div class="work">
                        <p class="sub-title">工作相关</p>
                        <p v-if="student.hope_work" class="sub-content">期望工作:{{student.hope_work}}</p>
                        <p v-if="student.now_salary_str" class="sub-content">当前薪资水平:{{student.now_salary_str}}元</p>
                        <p v-if="student.hope_salary_str" class="sub-content">期望薪资水平:{{student.now_salary_str}}元</p>
                    </div>
                    <div class="detail">
                        <p class="sub-title">详情</p>
                        <p class="third-title">工作经验:</p>
                        <p v-if="student.experience" class="sub-content" style="text-indent:2rem;"> {{student.experience}}</p>
                        <p class="third-title">自我评价:</p>
                        <p v-if="student.evaluation" class="sub-content" style="text-indent:2rem;"> {{student.evaluation}}</p>
                        <p class="third-title">兴趣爱好:</p>
                        <p v-if="student.interest" class="sub-content" style="text-indent:2rem;"> {{student.interest}}</p>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="学员表达课详情" name="second">
                <el-table :data="lectures" style="width: 100%">
                    <el-table-column prop="title" label="课程名">
                    </el-table-column>
                    <el-table-column prop="duration" label="上课时间">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { getStudentDetail, changeHrFocusStatus } from 'api/remoteSearch'
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            isFocusLoading: false,
            isFocus: false,//hr是否已关注
            tabActiveName: 'first',
            student: {},
            lectures: []
        }
    },
    computed: {
        ...mapGetters([
            'roles',
            'userId'
        ])
    },
    created(){
        // if(this.roles.indexOf("studet"))
    },
    mounted() {
        console.log(this.$route.params.id)
        this.fetch(this.$route.params.id);
    },
    methods: {
        //修改关注信息
        changeFocusStatus() {
            let vm = this;
            vm.isFocusLoading = true;
            changeHrFocusStatus(vm.userId, this.$route.params.id, !vm.isFocus).then(res => {
                vm.isFocusLoading = false;
                if(res.data.status=='success'){
                    vm.isFocus=!vm.isFocus; 
                }
                 alert(res.data.msg)
            }).catch(err => {
                vm.isFocusLoading = false;
            })
        },
        fetch(studentId) {
            let vm = this;
            getStudentDetail(studentId)
                .then(res => {
                    if (res.data.status == 'success') {
                        vm.student = res.data.student;
                        vm.lectures = res.data.lectures;
                        vm.isFocus = res.data.is_focus;
                    }
                })
                .catch(err => {

                })
        },
        selectTab() {
            console.log(arguments)
        },
        getAge() {

        }
    }
}
</script>
    
<style scoped>
.info {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 13px 7px;
}

.info .head {
    text-align: center;
}

.info .head-img {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    /* border: 10px solid #333; */
}

.info .sub-title {
    border-left: 5px solid #48576a;
    font-size: 20px;
    color: #0b70bd;
    font-weight: bold;
    padding: 10px 0px 10px 40px;
    background-color: rgba(0, 0, 0, 0.1);
}

.info .sub-content {
    padding-left: 20px;
    color: #48576a;
}

.info .third-title {
    margin-left: 20px;
    font-size: 18px;
    color: #1f2d3d;
}

.center {
    text-align: center;
}
</style>
